extends ../layout

block head
  script(src='/js/lib/chart.umd.js')

block content
  .pb-2.mt-2.mb-4.border-bottom
    h2
      i.fas.fa-chart-bar.fa-sm.fa-sm.me-2(style='color: #ff6384')
      | Chart.js and Alpha Vantage

  .btn-group.d-flex(role='group')
    a.btn.btn-primary.w-100(href='https://www.chartjs.org/docs', target='_blank')
      i.fas.fa-chart-bar.fa-sm.me-2
      | Chart.js Docs
    a.btn.btn-primary.w-100(href='https://www.alphavantage.co/documentation', target='_blank')
      i.fas.fa-money-check-dollar.fa-sm.me-2
      | Alpha Vantage Docs
  .container
    .mt-2.mb-4
      h3 Chart.js — Line Chart Demo using data from Alpha Vantage
    | Alpha Vantage APIs are grouped into four categories: (1) Stock Time Series Data, (2) Physical and Digital/Crypto Currencies (e.g., Bitcoin), (3) Technical Indicators, and (4) Sector Performances. All APIs are realtime: the latest data points are derived from the current trading day.
    | ChartJS can render various chart types with different formatting.
    | This example plots the closing stock price of Microsoft for the last 100 days.
    p
    h6 #{ dataType }
    .mt-2.mb-4
      div(style='width: 90%; height: 80%; margin: 0 auto')
        canvas#chart
  script.
    var datesList = !{ dates };
    var closingList = !{ closing };
    var ctx = document.getElementById('chart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: datesList,
        datasets: [
          {
            label: "Microsoft's Closing Stock Values",
            data: closingList,
            borderColor: '#3e95cd',
            backgroundColor: 'rgba(118,152,255,0.4)',
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: true,
      },
    });
